<!--  图片识别文字的模块   -->
<template>
  <div class="container">
    <!--  面包屑导航 -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/onlinetool/#/">首页</a></li>
        <li class="breadcrumb-item"><a href="#">AI智能</a></li>
        <li class="breadcrumb-item active" aria-current="page">图片识别文字</li>
      </ol>
    </nav>

    <!--  头部卡片  -->
    <div class="card border-primary text-center">
      <!--  放在 .card 里面的标签默认宽度会占满父元素宽度, 所以 a 标签应该放在 .card-body 里面-->
      <div class="card-header bg-info">图片识别文字</div>
      <div class="card-body ">
        <h5 class="card-title text-primary">上传一张图片，自动识别出图片中的文字~</h5>
        <p class="card-text"></p>

        <form enctype="multipart/form-data" method="post">
          <!--  监听-->
            <input @change="fileChange($event)" type="file" name="file" id="myfile">
            <input class="btn btn-primary mt-2" @click="uploadFile" type="button" value="上传该文件">
        </form>

             <!--  旋转提示组件  -->
        <div class="spinner-border text-success ml-5" role="status">
          <span class="sr-only">Loading...</span>
        </div>

      </div>
    </div>



    <div class="card mt-3 border-primary text-center">
      <div class="card-header">
        最终识别出来的结果
      </div>
      <div class="card-body">
        <p class="card-title">{{ myresult.responseText }}</p>
      </div>
    </div>

    <div class="mt-3 border-primary text-center">
      <img id="avatar-img" :src=src alt="" class="fluid">
    </div>


  </div>
</template>

<script>
  export default {
    name: 'ImageToWord',
    data() {
      return {
        /*    图片的src属性，前端的，不是服务器的url*/
        src: "",
        /*  识别出来的文本 */
        myresult: {}
      }
    },
    methods: {
      /*  选择图片之后，在前端进行展示    */
      fileChange(el) {
        console.log("来了老弟")
        if (!el.target.files[0].size) return;
        this.setImage(el.target.files[0]);
      },
      setImage(file) {
        //判断是否为图片文件
        if (file.type.indexOf("image") == -1) {
          console.log('上传失败')
          // this.$dialog.toast({ mes: "请选择图片文件" });
        } else {
          let reader = new FileReader();
          let image = new Image();
          let _this = this;
          reader.readAsDataURL(file);
          reader.onload = function() {
            file.src = this.result;
            image.onload = function() {
              let width = image.width;
              let height = image.height;
              file.width = width;
              file.height = height;
            };
            image.src = file.src;
            _this.src = image.src;
          };
        }
      },
      uploadFile() {
        this.$(".spinner-border").css("display", "inline-block");

        // 获得文件
        console.log(this.$("#myfile"));

        var crowd_file = document.getElementById("myfile").files[0];
        console.log(crowd_file);

        /*  构建需要发送给后端的数据  */
        var formData = new FormData();
        formData.append("file", crowd_file);
        console.log(555)

        /*
            设置Ajax 为同步，然后返回值就是后端返回的数据
            因为在 success 方法里面不能为外部变量赋值
            解决办法：应该可以用 axios 发送请求，更好解决
        * */
        this.myresult =  this.$.ajax({
          url: "http://116.62.157.224:8081/aiimage",
          data: formData,
          dataType: "text",   // 预期的服务器响应的数据类型。
          type: "POST",
          async: false,    // 默认是 ture(这里要设置为同步，那么 ajax 返回值就是后端返回的值)。
          enctype: "multipart/form-data",
          processData: false,
          contentType: false,

          success: function (data) {
            console.log("data = " + data);
          }
        });
        console.log("myreslu = " + this.myresult);
        if (this.myresult !== null) {
          this.$(".spinner-border").css("display", "none");
        }
      },
    },


  }
</script>

<style scoped>
  .spinner-border {
    display: none;
  }
</style>
